import React, { useState, useEffect, useRef } from "react";
import { Card, Button, Descriptions, message, Avatar } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import { ArrowLeftOutlined } from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";
import ProForm, { ModalForm } from "@ant-design/pro-form";
import { history, useLocation } from "umi";

import {
  fetchUserShopList,
  getInfo,
  getInspectionHospitalList,
  getInspectionList,
} from "@/api/user";
import BarCodes from "@/components/BarCodes";
import { checkTypeOptions } from "@/const";

const Detail = () => {
  const [info, setInfo] = useState({});

  const location = useLocation();
  const { id } = location.query;

  const fetchInfo = async () => {
    const res = await getInfo({ id });
    const sub = await getInspectionHospitalList({ id });
    const three = await getInspectionList({ id });
    const postData = res.data;
    setInfo({
      ...postData,
      hospitalList: sub.data,
      checkRecordList: three.data,
    });
  };

  useEffect(() => {
    fetchInfo();
  }, []);

  const columns = [
    {
      title: "医院名称",
      dataIndex: "name",
    },
    {
      title: "医院地址",
      dataIndex: "address",
    },
  ];

  const downloadFile = (url) => {
    window.open(url, "_blank");
  };

  const columns2 = [
    {
      title: "条形码",
      dataIndex: "barCode",
      width: 100,
      render: (_, record) => {
        return <BarCodes barCode={record.barCode}></BarCodes>;
      },
    },
    {
      title: "条码编号",
      dataIndex: "barCode",
    },
    {
      title: "医院",
      dataIndex: "hospitalName",
    },
    {
      title: "检测类型",
      dataIndex: "checkType",
      valueType: "select",
      fieldProps: {
        options: checkTypeOptions,
      },
    },
    {
      title: "采样时间",
      dataIndex: "createTime",
    },
    {
      title: "检测时间",
      dataIndex: "inspectionTime",
    },
    {
      title: "报告时间",
      dataIndex: "finishTime",
    },
    {
      title: "操作",
      dataIndex: "option",
      valueType: "option",
      render: (_, record) => [
        [1, 3].includes(record.checkType) && record.reportStatus === 2 && (
          <Button
            key="d1"
            size="small"
            onClick={() => downloadFile(record.diseasePdf)}
          >
            查看病载报告
          </Button>
        ),
        [2, 3].includes(record.checkType) && record.reportStatus === 2 && (
          <Button
            key="d2"
            size="small"
            onClick={() => downloadFile(record.drugPdf)}
          >
            查看耐药报告
          </Button>
        ),
      ],
    },
  ];
  return (
    <PageContainer
      extra={
        <Button icon={<ArrowLeftOutlined />} onClick={() => history.goBack()}>
          返回
        </Button>
      }
    >
      <Card title="基本信息">
        <Descriptions columns={4}>
          <Descriptions.Item
            label={
              info?.outPatientNo === info?.antiviralCode
                ? "医院门诊号"
                : "抗病毒治疗编号"
            }
          >
            {info?.antiviralCode}
          </Descriptions.Item>

          <Descriptions.Item label="治疗时间">
            {info?.treatTime}
          </Descriptions.Item>

          <Descriptions.Item label="授权医院">
            {info?.inspectionHospitalCount || 1} 家
          </Descriptions.Item>
          <Descriptions.Item label="检测次数">
            {info?.inspectionCount || 1}次
          </Descriptions.Item>
        </Descriptions>
      </Card>

      <Card title="授权医院" style={{ marginTop: 20 }}>
        <ProTable
          search={false}
          options={false}
          pagination={false}
          toolBarRender={false}
          columns={columns}
          dataSource={info?.hospitalList}
        ></ProTable>
      </Card>

      <Card title="检测记录" style={{ marginTop: 20 }}>
        <ProTable
          search={false}
          options={false}
          pagination={false}
          toolBarRender={false}
          columns={columns2}
          dataSource={info?.checkRecordList}
        ></ProTable>
      </Card>
    </PageContainer>
  );
};

export default Detail;
